<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>

    <style type="text/css">
        #app {
            min-height: 100%;
            background-color: rgb(240, 240, 240);
        }

        #app > ul {
            background-color: rgba(14, 24, 63, 0.78);
            width: 100%;
            height: 80px;
        }

        #app > ul li {
            float: left;
            list-style: none;
            width: calc(20% - 20px);
            height: 50px;
            padding-left: 20px;
            margin-top: 15px;
        }

        #app > ul li span {
            display: block;
            line-height: 25px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            text-align: center;
        }

        #app > ul li span:first-child {
            font-size: 24px;
            color: rgb(0, 165, 232);
        }

        .header {
            height: 40px;
            width: 100%;
            line-height: 40px;
        }

        .header .left {
            float: left;
            font-size: 16px;
            font-weight: bold;
            color: rgb(124, 128, 140);
            margin-left: 20px;
        }

        .header .right {
            float: right;
        }

        .header > .right span {
            width: 100px;
            height: 30px;
            font-size: 12px;
            display: block;
            margin-right: 10px;
            float: left;
            border-radius: 15px;
            cursor: pointer;
            text-align: center;
            margin-top: 10px;
            line-height: 30px;
        }

        .header > .right .active {
            background: #909399;
            color: rgba(255, 255, 255, 0.9);
        }

        .el-scrollbar {
            height: calc(100% - 120px)
        }

        .content {
            width: 100%;
            padding-right: 20px;
        }

        .content > div {
            width: 265px;
            height: 160px;
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }

        .content > div .left {
            float: left;
        }

        .content > div .left span {
            display: block;
            font-family: "Microsoft YaHei";
            padding-left: 10px;
        }

        .content .left span:first-child {
            margin-top: 10px;
            line-height: 30px;
            font-size: 14px;
        }

        .content .left span:nth-child(2) {
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
        }

        .content .left span:nth-child(n+3) {
            font-size: 12px;
        }

        .content > div .right {
            float: right;
            width: 110px;
            margin-right: 10px;
            height: calc(100% - 20px);
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .content > div .right > div {
            width: 100%;
            height: 100%;
        }

        .content > .card-default {
            background: rgb(255, 255, 255);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-default .left span:nth-child(2) {
            color: rgb(0, 165, 232);
        }

        .content > .card-default .left span:first-child {
            color: rgba(0, 165, 232, 0.8);
        }

        .content > .card-default .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-default .left span:nth-child(n+3) {
            color: rgba(0, 165, 232, 0.45);
            line-height: 25px;
        }

        .content > .card-red {
            background: rgb(237, 66, 72);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-red .left span:nth-child(2) {
            color: rgb(255, 255, 255);
        }

        .content > .card-red .left span:first-child {
            color: rgba(255, 255, 255, 0.8);
        }

        .content > .card-red .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-red .left span:nth-child(n+3) {
            color: rgba(255, 255, 255, 0.45);
            line-height: 25px;
        }

        .content > .card-green {
            background: rgb(0, 179, 122);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-green .left span:nth-child(2) {
            color: rgb(255, 255, 255);
        }

        .content > .card-green .left span:first-child {
            color: rgba(255, 255, 255, 0.8);
        }

        .content > .card-green .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-green .left span:nth-child(n+3) {
            color: rgba(255, 255, 255, 0.45);
            line-height: 25px;
        }

        .content > .card-blue {
            background: rgb(0, 165, 232);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-blue .left span:nth-child(2) {
            color: rgb(255, 255, 255);
        }

        .content > .card-blue .left span:first-child {
            color: rgba(255, 255, 255, 0.8);
        }

        .content > .card-blue .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-blue .left span:nth-child(n+3) {
            color: rgba(255, 255, 255, 0.45);
            line-height: 25px;
        }

        .content > .card-text-green {
            background: rgb(255, 255, 255);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-text-green .left span:nth-child(2) {
            color: rgb(0, 179, 122);
        }

        .content > .card-text-green .left span:first-child {
            color: rgba(0, 179, 122, 0.8);
        }

        .content > .card-text-green .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-text-green .left span:nth-child(n+3) {
            color: rgba(0, 179, 122, 0.45);
            line-height: 25px;
        }

        .content > .card-text-red {
            background: rgb(255, 255, 255);
            border: 1px solid rgb(228, 228, 228);
        }

        .content > .card-text-red .left span:nth-child(2) {
            color: rgb(237, 66, 72);
        }

        .content > .card-text-red .left span:first-child {
            color: rgba(237, 66, 72, 0.8);
        }

        .content > .card-text-red .left span:nth-child(3) {
            margin-top: 30px;
        }

        .content > .card-text-red .left span:nth-child(n+3) {
            color: rgba(237, 66, 72, 0.45);
            line-height: 25px;
        }

        .clinbrain-popover-reference {
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<div id="app" v-cloak>
    <ul>
        <li><span>{{DiagnosisAndTreatment.PaOpRegistrationCount}}</span><span>门诊就诊次数</span></li>
        <li><span>{{DiagnosisAndTreatment.PaIpAdmissionDischargeCount}}</span><span>住院次数</span></li>
        <li><span>{{DiagnosisAndTreatment.PaDiagCount}}</span><span>疾病种类</span></li>
        <li><span>{{DiagnosisAndTreatment.Anaphylaxis}}</span><span>有无过敏</span></li>
        <li><span>{{DiagnosisAndTreatment.SpScheuledProcedureCount}}</span><span>手术次数</span></li>
    </ul>
    <div class="header">
        <div class="left">关注项目</div>
        <div class="right">
            <span v-on:click="onTabClick(0)" :class="activeCard==0?'active':''">检查指标</span>
            <span v-on:click="onTabClick(1)" :class="activeCard==1?'active':''">检验指标</span>
        </div>
    </div>
    <el-scrollbar>
        <div v-show="activeCard==0" class="content">
            <el-popover placement="right" trigger="hover" v-for="(item,index) in ObsIndex">
                <div slot="reference"
                     style="width:220px; height:130px; border: 1px solid rgb(228, 228, 228); background:rgb(255,255,255); margin-left:20px; margin-top:20px;">
                    <div style="height:40px; line-height:40px; font-size:12px; color:rgb(41,177,237); margin-left:10px;">
                        检查项目
                    </div>
                    <div style="height:40px; line-height:40px; font-size:18px; color:rgb(41,177,237);margin-left:10px; font-weight:bold;">
                        {{item.OBSMethodName}}
                    </div>
                    <div style="height:40px; line-height:40px; font-size:12px; color:rgb(41,177,237);margin-left:10px; margin-top:10px;">
                        最近检查时间：{{item.RequestedDateTime}}
                    </div>
                </div>
                <div class="clinbrain-card" style="width:500px;">
                    <div class="clinbrain-card-header"><span>检查报告详情</span></div>
                    <div class="clinbrain-card-body">
                        <div class="checkinfo-title-container">
                            <span>{{item.HospitalName}}</span>
                            <span>{{item.OBSMethodName}}</span>
                            <div class="checkinfo-button">
                                <span>影像预览</span>
                            </div>
                        </div>
                        <div class="checkinfo-card">
                            <div class="title">基本信息</div>
                            <div class="checkinfo-baseinfo">
                                <ul>
                                    <li>
                                        <span>就诊类别：</span>
                                        <span>{{item.TypeName}}</span>
                                    </li>
                                    <li>
                                        <span>申请科室：</span>
                                        <span>{{item.ExecDeptName}}</span>
                                    </li>
                                    <li>
                                        <span>申请医生：</span>
                                        <span>{{item.ApplyDoctor}}</span>
                                    </li>
                                    <li>
                                        <span>申请日期：</span>
                                        <span>{{item.RequestedDateTime|dateFormat}}</span>
                                    </li>
                                    <li>
                                        <span>报告人员：</span>
                                        <span>{{item.PatientName}}</span>
                                    </li>
                                    <li>
                                        <span>检查日期：</span>
                                        <span>{{item.ObservationBeginDateTime|dateFormat}}</span>
                                    </li>
                                    <li>
                                        <span>审核人员：</span>
                                        <span>{{item.AssessorName}}</span>
                                    </li>
                                    <li>
                                        <span>报告日期：</span>
                                        <span>{{item.ReportedDateTime|dateFormat}}</span>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                            </div>
                            <div class="title">检查项目</div>
                            <div class="checkinfo-text">{{item.OBSMethodName}}</div>
                            <div class="title">检查部位</div>
                            <div class="checkinfo-text">{{item.ObsSiteName}}</div>
                            <div class="title">检查结论</div>
                            <div class="checkinfo-text">{{item.OBSDiagText}}</div>
                            <div class="title">检查所见</div>
                            <div class="checkinfo-text">{{item.Findings}}</div>
                        </div>
                    </div>
                </div>
            </el-popover>
            <div class="clear"></div>
        </div>
        <div v-show="activeCard==1" class="content">
            <div v-for="(item,index) in LabIndex" class="card-default">
                <div class="left">
                    <span>{{item.ProjectName}}</span>
                    <span>{{item.ObsResult}}</span>
                    <span>{{item.Consult}}</span>
                    <span>{{item.ObsDate}}</span>
                </div>
                <div class="right">
                    <el-popover placement="right"
                                width="400" trigger="hover" @after-enter="after(item,index)">
                        <div style="width:380px; height:330px;">
                            <div style="width:100%; height:30px;">
                                <i style="width:5px; height:100%; height:20px; background:rgb(24,144,255); margin-right:10px; display:block; float:left;"></i><span
                                    style="font-size:12px;color:rgba(0,0,0,0.65)">指标趋势</span>
                            </div>
                            <div :id="'echartMax'+index" style="width:380px; height:300px;"></div>
                        </div>
                        <div slot="reference" class="clinbrain-popover-reference">
                            <div :id="'echart'+index" class="clinbrain-popover-reference"></div>
                        </div>
                    </el-popover>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </el-scrollbar>
</div>
</body>

<script type="text/javascript">
    var app = new Vue(
        {
            el: "#app",
            data() {
                return {
                    activeCard: 1,
                    DiagnosisAndTreatment: {
                        PaOpRegistrationCount: 0,
                        PaIpAdmissionDischargeCount: 0,
                        PaDiagCount: 0,
                        Anaphylaxis: 0,
                        SpScheuledProcedureCount: 0
                    },
                    LabIndex: [],
                    ObsIndex: []
                }
            },
            methods: {
                QueryDiagnosisHistory: function () {

                },
                onTabClick(index) {
                    this.activeCard = index;
                },
                after(item, index) {
                    this.toEchart("echartMax" + index, item.TrendValues, true)
                },
                toEchart(el, trendValues, isMax) {
                    var xAxis = [];
                    for (var i = 0; i < trendValues.length; i++) {
                        xAxis.push("" + i + "");
                    }
                    var echartsDom = document.getElementById(el)
                    var options = {
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {show: isMax},
                            data: xAxis,
                            axisLabel: {show: isMax},
                            axisTick: {show: isMax},
                            axisLine: {show: isMax}
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {show: isMax},
                            axisLabel: {show: isMax},
                            axisTick: {show: isMax},
                            axisLine: {show: isMax}
                        },
                        series: [{
                            data: trendValues,
                            type: 'line',
                            areaStyle: {},
                            smooth: true,
                            symbolSize: 0,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,165,232,0.1)',
                                    lineStyle: {
                                        width: '1.5',
                                        color: 'rgba(0,165,232,0.5)'
                                    }
                                }
                            }
                        }],
                        grid: {left: 0, right: 0, top: 0, bottom: 0}
                    }
                    echarts.init(echartsDom).setOption(options)
                }
            },
            created() {
                var _this = this;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: 'com.base.api.cdr.PersonalMedicalTotal',
                        params: {
                            patientId: clinBrain.getParam('patientId')
                        }
                    }
                }, this).success(function (resp) {
                    _this.DiagnosisAndTreatment = resp.data.Data[0];
                    // _this.LabIndex = resp.data.Indicators.Data.LabIndex;
                    var labIndex = {};
                    labIndex.Consult = "155-428 umol/L";
                    labIndex.ObsDate = "2018-09-05";
                    labIndex.ObsResult = "142 umol/L";
                    labIndex.ProjectName = "尿酸(干式)";
                    labIndex.TrendValues = [];
                    labIndex.TrendValues.push("390");
                    labIndex.TrendValues.push("290");
                    labIndex.TrendValues.push("390");
                    labIndex.TrendValues.push("124");
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    _this.LabIndex.push(labIndex);
                    // _this.ObsIndex = resp.data.Indicators.Data.ObsIndex;
                    var obsIndex = {};
                    obsIndex.ApplyDoctor = "张三";
                    obsIndex.AssessorName = "李四";
                    obsIndex.ExecDeptName = "头颈部肿瘤专科";
                    obsIndex.Findings = "两肺纹理增多，分布无明显异常，气管支气管尚通畅，右肺中叶胸膜下见栗粒灶.";
                    obsIndex.OBSDiagText = "右肺中叶胸膜下小增殖灶。左肺上叶下舌段纤维、钙化灶，右下肺支扩灶。";
                    obsIndex.ObservationBeginDateTime = "2018-09-05";
                    obsIndex.OBSMethodName = "CT";
                    obsIndex.ObsSiteName = "胸部平扫";
                    obsIndex.OPorIP = "住院";
                    obsIndex.PatientName = "张三";
                    obsIndex.ReportedDateTime = "2018-09-05";
                    obsIndex.RequestedDateTime = "2018-09-05";
                    _this.ObsIndex.push(obsIndex);
                    _this.ObsIndex.push(obsIndex);
                    _this.ObsIndex.push(obsIndex);
                    _this.ObsIndex.push(obsIndex);
                    _this.ObsIndex.push(obsIndex);
                    _this.ObsIndex.push(obsIndex);
                    _this.$nextTick(function () {
                        for (var i = 0; i < _this.LabIndex.length; i++) {
                            _this.toEchart("echart" + i, _this.LabIndex[i].TrendValues, false);
                        }
                    });
                })
            }
        });
</script>
</html>


